<style type="text/css">
	header{
		display:none;
	}
	section{
		top:0;
		background-color:#efefef;
	}
	ul,li,h1,h2,h3,h4,h5,dl,dt,dd,p,{
		margin:0;
		padding:0 auto;
	}
	img{
		display:block;
		margin:0;
	}
	ul li {
		list-style:none;
	}
	a{
	  text-decoration:none;
	}
	.cardiv{
		position:absolute;
		right:0;
		left:0;
		overflow:auto;
		/*background-color:white;*/
	}
	
	.empty-notice{
		padding-top: 20%;
		background-color:#efefef;
	}
	 .empty-notice .pic{
		width: 2.9375rem;
		height: 2.9375rem;
		background-image: url(./images/cart_img.png);
		background-repeat: no-repeat;
		margin: auto;
	}
	.empty-notice .text{
		text-align: center;
		font-size: 0.4375rem;
		line-height: 0.625rem;
	}
	.empty-notice a{
		display: block;
		width: 2.34375rem;
		height: 0.625rem;
		font-size: 0.4375rem;
		line-height: 0.625rem;
		border: 0.015625rem solid #ccc;
		color: #999;
		text-align: center;
		margin: 0.3125rem auto;
	}
	
	.notice{
		background-color:white;
	}
	/*
	 小黄色对号
	 * */
	.select{
		width: 0.78125rem;
	}
	.select input{
		display:none;
	}
	
	.select label{
		/*display:flex;*/
		height:100%;
	}
	
	.select div{
		width: 0.80625rem;
		height: 0.80625rem;
		background:url("img/黄对v.png");
		background-size:100%;
	}
	/*根据input的 状态，来改变div 的状态*/
	.select input:checked+div{
		background:url("img/黄对.png");
		background-size:100%;
	}
	
	
	.c_head{
	    width:100%;
	    height:1.40625rem;
	    background-color:#f9fafd;
	    text-align:center;
	    line-height:1.40625rem;
	    border-bottom:solid 0.03125rem #e0e0e0;
	}
	.c_head2{
		width:96%;
		height:1.484375rem;
		display:flex;
		align-items: center;
		justify-content: flex-start;
		color:red;
		padding-left:0.46875rem;
	}
	.tiao{
		width:100%;
		height:0.3125rem;
		background-color: #efefef;
	}
	.c_info{
	   width:95%;
	   height:1.51875rem;
	   border-bottom:solid 1px #CCCCCC;
	   color:#adadad;
	   padding-left:0.46875rem;
	   padding-top:0.2rem;
	   line-height:0.625rem;
	}
	.c_info span:nth-child(1){
		width:0.15625rem;
		height: 0.3125rem;
		background-color:#ffd600;
		display:inline-block;
	}
	/*预定时间
	 */
	.c_time{
	    width:96%;
	    height:1.5625rem;
	    display:flex;
	    align-items:center;
	    padding-left:0.46875rem;
	    border-bottom:solid 1px #CCCCCC;
	}
	.c_time span:nth-child(1){
		width:1.71875rem;
	}
	.c_time span:nth-child(2){
		color:red;
		width:2.1875rem;
	}
	.c_time p:nth-child(3){
		flex-grow: 1;
	    display:flex;
	    justify-content: flex-end;
		margin-right:0.46875rem;
	}
	
	/*
	 备注
	 * */
	.c_remark{
		width:96%;
		height:1.5625rem;
		border-bottom:solid 1px #CCCCCC;
		padding-left:0.46875rem;
		display:flex;
		align-items:center;
	}
	.c_remark input{
		width:6.675rem;
		height:1.09375rem;
	    border-radius:0.15625rem;
	    margin-left:0.46875rem;
	    text-align:center;
	    line-height:1.09375rem;
	    padding-left:0.1rem;
	    font-size:0.46875rem;
	}
	.c_commit{
		width:96%;
		height:2.5rem;
		border-bottom:solid 1px #CCCCCC;
		padding-left:0.46875rem;
		display:flex;
		align-items:center;
		/*justify-content:center;*/
		
	}
	.c_commit>img:nth-child(1){
		width:1.0625rem
		height:1.1875rem;
		margin-right:0.78125rem;
	}
	
	
	.c_commit>img:nth-child(2){
		width:0.78125rem;
		height:1.09375rem;
		margin-right:0.78125rem;
	}
	
	.c_amount{
		width:6.25rem;
		display:flex;
		align-items: center;
		margin-top:0.46875rem;
	}
	.c_amount >img{
		width:0.859375rem;
		height:auto;
		margin-right:0.2rem;
		margin-left:0.2rem;
	}
	.c_amount span:nth-child(1){
		width:1.015625rem;
		display:inline-block;
		margin-right:1.875rem;
	}
	
	
	/*结算部分 */
	
	.foot{
		width:100%;
		height:1.625rem;
		display:flex;
		
	}
	.foot_left{
		height:1.625rem;
		display:flex;
		flex-grow: 1;
		align-items: center;
		padding-left:0.46875rem;
	}
	.foot_left >img:nth-child(1){
		width: 0.80625rem;
		height: 0.90625rem;
		
	}
	
	.foot_left >span:nth-child(2){
		display:inline-block;
		margin-right:0.78125rem;
	}
	
	.foot >span:nth-child(2){
		display:inline-block;
		width: 3.125rem;
		height:100%;
		background-color:#ffd600;
		text-align:center;
		line-height:1.625rem;
		
	}
</style>

<div class="cardiv">
	<div class="empty-notice" ng-show="!status">
		<div class="pic"></div>
		<div class="text">亲，购物车空空的耶~</div>
		<a href="#/home">去逛逛</a>
	</div>
	
    <div  ng-show="status" class="notice">
	<div class="c_head">
		<h1>购物车</h1>
	</div>
	
	<div class="c_head2">鲜蜂侠需要您的精确坐标</div>
	<div class="tiao"></div>
	
	<div class="c_info">
		<span></span>
		<span>闪送超市</span>
		<p>￥0起送，22：00前满￥30减免运费，22:00后满￥69减免运费</p>
	</div>
	
	<div class="c_time">
		<span>收货时间</span>
		<span> 一小时到达</span>
		<p>可预订&gt;</p>
	</div>
	
	<div class="c_remark">
		<span>收货备注</span>
		<input type="text" placeholder="可输入100字以内特殊要求">
	</div>
	<!--单选按钮-->
	<div class="c_commit" ng-repeat="(key,i) in lists" >
		<div class="select" ng-click="selectFns()">
			<label>
				<!--用 select 绑定 单选按钮的状态 -->
				<input type="checkbox" ng-model="i.selec"/>
				<div>
					
				</div>
			</label>
		</div>
						
						
				
		<img ng-src="{{i.img}}">
		<div>
			<h3>维他柠檬茶饮料</h3>
			<div class="c_amount">
				<span>￥2.5</span>
				<img src="img/减号.png" ng-click="compute(i,-1,key)" ng-show="i.num>0" >
				<span ng-show="i.num>0">{{i.num}}</span>
				<img src="img/加号.png" ng-click="compute(i,1)">
			</div>
		</div>
	</div>
	
	<div class="foot">
		<div class="foot_left">
			<div class="select" ng-click="selectAll()">
				<label>
					<input type="checkbox"  ng-model="selectBtn"/>
					<div>
						
					</div>
				</label>
				
		    </div>
		   <span>全选</span>
		   <span style="color:red">共：</span>&nbsp;
		   <span >￥{{priceAll}}</span>
		</div>
		<span>选好了</span>
	</div>
	
	</div>
</div>